<template>
  <div class="home">
    <Header/>
    <el-carousel height="750px" indicator-position="outside" class="carousel-container">
      <el-carousel-item v-for="(img, index) in carouselImages" :key="index">
        <img :src="img" alt="汉中风景" style="width:100%;height:100%;object-fit:cover;"/>
      </el-carousel-item>
    </el-carousel>
    <div class="content-wrapper">
      <h1 class="main-title">欢迎来到陕西省汉中市</h1>
      <p class="description">汉中市位于陕西省南部，是一座历史悠久、风景秀丽的城市。这里有众多的自然景观和人文古迹，如武侯祠、青木川古镇等，吸引着来自世界各地的游客。</p>
        <div class="map-container">
          <img src="https://p3-search.byteimg.com/img/labis/e7b9933fa745cdcef32014022bcfc469~480x480.JPEG" alt="汉中地图" class="map-image">
        </div>
        <div class="nav-links">
        <el-button type="primary" round @click="$router.push('/attractions')" class="nav-item">景点介绍</el-button>
        <el-button type="primary" round @click="$router.push('/routes')" class="nav-item">旅游线路</el-button>
        <el-button type="primary" round @click="$router.push('/food')" class="nav-item">美食推荐</el-button>
        <el-button type="primary" round @click="$router.push('/guide')" class="nav-item">旅游指南</el-button>
        <el-button type="primary" round @click="$router.push('/events')" class="nav-item">活动资讯</el-button>
        <el-button type="primary" round @click="$router.push('/faq')" class="nav-item">常见问题</el-button>
      </div>
    </div>
	<Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Carousel from '@/components/Carousel.vue'

export default {
  name: 'Home',
  components: {
    Header,
    Carousel,
	Footer
  },
  data() {
    return {
      carouselImages: []
    }
  }, mounted() {
    this.$http.get("userApi/attractions/getDisplayImage").then((resp) => {
    	if (resp.data.code == 200) {
    		this.carouselImages = resp.data.data;
    	} else {
    		this.$message({
    			message: '获取失败',
    			type: 'error'
    		});
    	}
    }).catch(() => {
    	this.$message({
    		message: '网络错误，请稍后重试',
    		type: 'error'
    	});
    })
  }
}
</script>

<style scoped>
:root {
  --main-color: #3498db;
  --main-radius: 18px;
  --main-shadow: 0 4px 24px rgba(52,152,219,0.10);
  --main-transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.carousel-container {
  padding: 24px;
  max-width: 1200px;
  margin: 110px auto 0;
  border-radius: var(--main-radius);
  box-shadow: var(--main-shadow);
  background: linear-gradient(120deg, rgba(240,249,255,0.7) 0%, rgba(193,225,255,0.5) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none;
  transition: var(--main-transition);
}
.carousel-container:hover {
  box-shadow: 0 8px 32px rgba(52,152,219,0.18);
}
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 48px;
  background: #fff;
  border-radius: var(--main-radius);
  box-shadow: var(--main-shadow);
  margin-top: 36px;
  transition: var(--main-transition);
}
.main-title {
  color: #2c3e50;
  font-size: 2.7rem;
  margin: 30px 0 20px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.06);
}
.description {
  color: #34495e;
  font-size: 1.18rem;
  line-height: 1.7;
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}
.map-container {
  text-align: center;
  margin: 30px 0;
}
.map-image {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: var(--main-transition);
}
.map-image:hover {
  box-shadow: 0 8px 32px rgba(52,152,219,0.18);
  transform: scale(1.03);
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 32px;
}
.nav-item {
  text-decoration: none;
  color: var(--main-color);
  font-weight: 500;
  font-size: 1.15rem;
  padding: 14px 32px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 8px rgba(52,152,219,0.08);
  transition: var(--main-transition);
  border: 1.5px solid #e0f2fe;
}
.nav-item:hover {
  background: var(--main-color);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 32px rgba(52,152,219,0.18);
  border-color: #6dd5fa;
}
@media (max-width: 900px) {
  .carousel-container, .content-wrapper {
    padding: 10px 4vw;
  }
  .main-title {
    font-size: 2rem;
  }
  .nav-links {
    gap: 16px;
  }
  .nav-item {
    font-size: 1rem;
    padding: 12px 18px;
  }
}
@media (max-width: 600px) {
  .carousel-container, .content-wrapper {
    padding: 4px 2vw;
    margin-top: 60px;
  }
  .main-title {
    font-size: 1.3rem;
  }
  .nav-links {
    gap: 8px;
  }
  .nav-item {
    font-size: 0.95rem;
    padding: 10px 10px;
  }
}
</style>